<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flex Panels </title>
    <script src="index.js"></script>
    <link href='https://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>
    <style>
        html {
            box-sizing: border-box;
            background: #ffc600;
            font-family: "helvetica nune";
            font-size: 20px;
            font-weight: 200;
        }

        .panels {
            min-height: 100vh;
            overflow: hidden;
            display: flex;
        }

        body {
            margin: 0;
        }

        *, *:before, *:after {
            box-sizing: inherit;
        }

        .panel {
            box-shadow: inset 0 0 0 5px;
            color: white;
            text-align: center;
            align-items: center;
            transition: font-size 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11),
            flex 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11),
            background 0.2s;
            font-size: 20px;
            background-size: cover;
            background: #600f9c center;
            flex: 1;
            justify-content: center;
            align-items: center;
            display: flex;
            flex-direction: column;
        }

        .panel1 {
            background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fg.search1.alicdn.com%2Fimg%2Fbao%2Fuploaded%2Fi4%2Fi1%2F4148177328%2FO1CN019txlnT240GutzA9pg_%21%214148177328.jpg&refer=http%3A%2F%2Fg.search1.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1646274630&t=894e699cd583a80330764e6fb89c8f9e ");
        }

        .panel2 {
            background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Fb352264fa7bfdb6d211f2e71e87cc2c48d85b805.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1646274630&t=e3f7f39d5a4211b7e52ae981ea6e68ba");
        }

        .panel3 {
            background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F548701103b8af200e60f80c643d18277dc922c80.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1646274630&t=eebb29a3c78f39d70cc715bb4469b9be");
        }

        .panel4 {
            background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F4d782a6851e2e8aab1bfb3cf66192d2a88dca41a.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1646274630&t=a1f9273afd72d43777956d6859be67d0");
        }

        .panel5 {
            background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F0a235c6379efaf631c1889a9e6880d9a116e6db1.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1646274630&t=bac88d4a361b2e24db3063c89c9789d0");
        }

        .panel > * {
            margin: 0;
            width: 100%;
            transition: transform 0.5s;
            flex: 1 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .panel > *:first-child {
            transform: translateY(-100%);
        }

        .panel > *:last-child {
            transform: translateY(100%);
        }

        .panel p {
            text-transform: uppercase;
            font-family: "Amatic SC", cursive;
            text-shadow: 0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
            font-size: 2em;
        }

        .panel p:nth-child(2) {
            font-size: 4em;
        }

        .panel.open {
            font-size: 40px;
            flex: 5;
        }

        .panel:hover {
            cursor: pointer;
        }
        .panel.open-active > *:first-child {
            transform: translateY(0);
        }
        .panel.open-active > *:last-child {
            transform: translateY(0);
        }

    </style>
</head>
<body>

<div class="panels">
    <div class="panel panel1">
        <p>Hey</p>
        <p>Hi</p>
        <p>Hello</p>
    </div>


    <div class="panel panel2">
        <p>Hey</p>
        <p>Hi</p>
        <p>Hello</p>
    </div>
    <div class="panel panel3">
        <p>Hey</p>
        <p>Hi</p>
        <p>Hello</p>
    </div>
    <div class="panel panel4">
        <p>Hey</p>
        <p>Hi</p>
        <p>Hello</p>
    </div>
    <div class="panel panel5">
        <p>Hey</p>
        <p>Hi</p>
        <p>Hello</p></div>
</div>
<script>
    const panels = document.querySelectorAll('.panel')

    function toggleOpen() {
        this.classList.toggle('open')
    }

    function toggleActive(e) {
        if(e.propertyName.includes('flex')){
            this.classList.toggle('open-active')

        }
    }

    panels.forEach(panel => panel.addEventListener("click", toggleOpen))
    panels.forEach(panel => panel.addEventListener("transitionend", toggleActive))

</script>
</body>
</html>